從 Day12 開始，我們提到了如何使用 tilemaker 依需求產製向量圖磚，並且在前端渲染。包括山頂/三角點、等高線以及水域。大部分的功夫會花在利用 Lua 設定檔處理 OSM 資料，以及撰寫前端的 Style 檔案。

實際上在做這類開發時，會需要考慮各種 edge cases 以及視覺設計，並非一朝一夕可以到位，因此參考現有的成熟做法就很有必要了。

我們曾在 Day6 提到的 OpenMapTiles，它就包含了完整的向量圖磚的 schema，以及複數的 Style 供各種用途。

雖然在原本 OpenMapTiles 的工具鏈中，向量圖磚是由資料庫(PostGIS)輸出，所幸 tilemaker 也提供相應的設定檔來產出符合 OpenMapTiles 的 schema，它們分別是 resources/config-openmaptiles.json 和 resources/process-openmapties.lua 兩個檔案（連結）

既然我們在前幾天已經對撰寫設定檔有些心得了，那麼往後就可以開始修改這兩個檔案，以符合登山圖資的需要。

今天我們先來試著照原樣產製圖磚，並在前端展示 openmaptiles.org 中，用於戶外活動的 Style: MapTiler Terrain吧：

產製圖磚

首先在我們的開發環境下，若使用最簡單的 python http.server 模組提供圖磚服務，則因為還沒有設定相應的 header，需要把 config-openmaptiles.json 中預設的壓縮選項(compress": "gzip")關閉，前端取得圖磚時才不致於無法辨識格式：

{
  ...
  settings: {
    ...
	"compress": "none",
    ...
  }
}

接著使用 tilemaker 來產製圖磚即可：

tilemaker \
	--input taiwan-latest.osm.pbf \
	--output tiles/ \
	--config config-openmaptiles.json \
	--process process-openmaptiles.lua

修改 Style

我可以在 https://github.com/openmaptiles/maptiler-terrain-gl-style 取得名 MapTiler Terrain 的 Style 檔案，將它另存為 style.json ，需要稍加修改才能使用。

我們先去掉檔案中，使用到 MapTiler 公司服務的部分。

首先在 sources 的部分，將名為 openmaptiles 的資料來源改為使用 localhost 的圖磚服務：

"sources": {
  "openmaptiles": {
    "type": "vector",
    "tiles": [
      "http://localhost:8000/tiles/{z}/{x}/{y}.pbf"
    ],
    "maxzoom": 14
  }
}

其它的資料來源（hillshade, contour）以及使用到它們的圖層則可以先刪除，後面再把它們加回來。

接著，將字型檔案改為使用 Demo Tiles：

"glyphs": "https://demotiles.maplibre.org/font/{fontstack}/{range}.pbf",

再將網頁中的 Maplibre 地圖物件引用新的 Style 即可：

var map = new maplibregl.Map({
  container: "map",
  zoom: 14,
  center: [121, 24],
  hash: true,
  style: './style.json',
});

結語

之前應該也有提過，其實從頭開始製作 tile schema，以及設定前端的渲染方案是極為繁複的作業，因此修改既有的成果是比較好的選擇。

雖然 OpenMapTiles 的 schema 在現有的開源產品中，是廣為使用且發展較完備的，但需要注意我們接下來會修改 schema 以符合登山需求，這件事情需要符合 CC-BY 授權，也就是需要在成果的 Web Map 中加入 OpenMapTiles 的說明文字。（來源）

若是讀者需要尋求授權更加自由的 schema 方案，或許可以考慮 protomaps 的 basemaps。雖然在細節上可能比不上 OpenMapTiles，但它使用 CC0 授權。